<template>
	<view class="tn-safe-area-inset-bottom">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack backgroundColor="none">
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="tn-search-fixed">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin"
				:style="{marginTop: vuex_custom_bar_height + 'px'}">

				<view class="justify-content-item align-content-item" style="width: 100vw;">
					<view class="tn-flex tn-flex-col-center"
						style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 90%;background-color: rgba(248, 247, 248, 0.9);">
						<text
							class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
						<input v-model="searchParam.keyword" class="justify-content-item" placeholder="想搜点什么咧"
							name="input" placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
					</view>
				</view>

				<view class="align-content-item">
					<view class="justify-content-item tn-text-center">
						<tn-button backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx" width="150rpx"
							@click="searchProduct">
							<text class="tn-color-white">搜 索</text>
						</tn-button>

					</view>
				</view>
			</view>
		</view>

		<view style="margin-top: 160rpx;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<block v-if="lastSearchWord.length>0">
				<view class="">
					<view class="tn-flex tn-flex-row-between tn-margin">
						<view class="justify-content-item tn-text-bold">
							<text class="tn-text-df tn-color-black">最近搜索</text>
						</view>
						<view class="justify-content-item tn-text-df tn-color-grey"
							@click="deleteAllLastSearchWordData">
							<text class="tn-padding-xs">删除</text>
							<text class="tn-icon-delete"></text>
						</view>
					</view>
				</view>

				<view>
					<view class="tn-tag-search tn-margin tn-text-justify">
						<view v-for="(item, index) in lastSearchWord" :key="index" @click="clickHistoryWord(item.word)"
							class="tn-tag-search__item tn-margin-right tn-round tn-text-sm tn-bg-gray--light tn-color-gray">
							<text class="tn-tag-search__item--prefix">#</text> {{ item.word }}
						</view>
					</view>
				</view>
			</block>

			<block v-if="vuex_hot_search_word && vuex_hot_search_word.length>0">
				<view>
					<view class="tn-flex tn-flex-row-between tn-margin">
						<view class="justify-content-item tn-text-bold">
							<text class="tn-text-df tn-color-black">热门搜索</text>
						</view>
					</view>
				</view>

				<view>
					<view class="tn-tag-search tn-margin tn-text-justify">
						<view v-for="(item, index) in vuex_hot_search_word" :key="index" @click="clickHistoryWord(item)"
							:class="[`tn-bg-${vuex_color[index]}--light tn-color-${vuex_color[index]}`]"
							class="tn-tag-search__item tn-margin-right tn-round tn-text-sm">
							<text class="tn-tag-search__item--prefix">#</text> {{ item }}
						</view>
					</view>
				</view>
			</block>

			<view class="tn-flex tn-flex-row-between tn-padding-top-xl tn-margin">

				<view class="justify-content-item tn-text-bold">
					<text class="tn-text-df tn-color-black">搜索结果</text>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @click="clickSortAsc(!searchParam.sortAsc)">
					<text class="tn-padding-xs">排序</text>
					<text class="tn-color-blue">{{searchParam.sortAsc?"↑":"↓"}}</text>
				</view>
			</view>

			<tn-tabs activeColor="#3668fc" :list="list" :isScroll="false" :current="searchParam.sortType" name="name"
				@change="changeSort"></tn-tabs>

		</view>

		<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
		<view class="tn-margin-bottom-lg">
			<view v-if="searchFlowShow && searchFlowList.length>0">
				<view class="" style="padding: 0rpx 20rpx;">
					<tn-waterfall ref="waterfall" v-model="searchFlowList" @finish="handleSearchFallFinish">
						<template v-slot:left="{ leftList }">
							<view v-for="(item, index) in leftList" :key="index" class="wallpaper__item">
								<view @click="tn('/pageA/atlas/atlas?id=' + item.id)" class="item__image">
									<tn-lazy-load :threshold="6000" height="100%" :image="item.multiImg"
										:index="item.id" imgMode="widthFix"></tn-lazy-load>
								</view>
								<view class="item__data">

									<view @click="tn('/pageA/atlas/atlas?id=' + item.id)" class="item__title-container">
										<text class="item__title tn-color-black">{{ item.title }}</text>
									</view>

									<view class="item__tags-container">
										<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex"
											:class="[item.color[tagIndex]]">{{tagItem}}</view>
									</view>

									<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
										<view class="justify-content-item">
											<view v-if="item.author"
												@click="tn('/pageA/author/author?id='+item.author.userId)"
												class="tn-flex tn-flex-col-center tn-flex-row-left">
												<view class="logo-pic">
													<view class="logo-image">
														<view class=""
															:style="'background-image:url('+ item.author.headImg +');width: 40rpx;height: 40rpx;background-size: cover;'">
														</view>
													</view>
												</view>
												<view class="tn-padding-left-xs">
													<text
														class="tn-color-gray tn-text-sm">{{item.author.username}}</text>
												</view>

											</view>
										</view>
										<view class="justify-content-item">
											<text class="tn-icon-footprint tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">{{ item.viewCount }}</text>
										</view>
									</view>


								</view>
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view v-for="(item, index) in rightList" :key="index" class="wallpaper__item">
								<view @click="tn('/pageA/atlas/atlas?id=' + item.id)" class="item__image">
									<tn-lazy-load :threshold="6000" height="100%" :image="item.multiImg"
										:index="item.id" imgMode="widthFix"></tn-lazy-load>
								</view>
								<view class="item__data">

									<view @click="tn('/pageA/atlas/atlas?id=' + item.id)" class="item__title-container">
										<text class="item__title tn-color-black">{{ item.title }}</text>
									</view>

									<view class="item__tags-container">
										<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex"
											:class="[item.color[tagIndex]]">{{ tagItem }}</view>
									</view>

									<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
										<view class="justify-content-item">
											<view v-if="item.author"
												@click="tn('/pageA/author/author?id='+item.author.userId)"
												class="tn-flex tn-flex-col-center tn-flex-row-left">
												<view class="logo-pic">
													<view class="logo-image">
														<view class=""
															:style="'background-image:url('+ item.author.headImg +');width: 40rpx;height: 40rpx;background-size: cover;'">
														</view>
													</view>
												</view>
												<view class="tn-padding-left-xs">
													<text
														class="tn-color-gray tn-text-sm">{{item.author.username}}</text>
												</view>

											</view>
										</view>
										<view class="justify-content-item">
											<text class="tn-icon-footprint tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">{{ item.viewCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</tn-waterfall>
					<tn-load-more v-if="searchFlowList.length>0" :status="loadStatus"></tn-load-more>
					<tn-empty v-else :textSize="30" :iconSize="160" mode="search" text="搜索结果空空如也"></tn-empty>
				</view>
			</view>

			<!-- <block v-for="(item, index) in content" :key="index">
				<view class="article-shadow tn-margin" @click="tn('/circlePages/news')">
					<view class="tn-flex">
						<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
							<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
								<text class="">{{ item.title }}</text>
							</view>
							<view class="tn-padding-top-xs" style="min-height: 90rpx;">
								<text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
									{{ item.desc }}
								</text>
							</view>
							<view class="tn-flex tn-flex-row-between tn-flex-col-between">
								<view v-for="(label_item,label_index) in item.label" :key="label_index"
									style="transform: translate(0rpx,6rpx);"
									class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold"
									:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
									<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
								</view>
								<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled"
									style="padding-top: 15rpx;">
									<text class="tn-icon-footprint tn-padding-right-xs tn-text-lg"></text>
									<text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
									<text class="tn-icon-like-lack tn-padding-right-xs tn-text-lg"></text>
									<text class="tn-text-df">{{ item.likeCount }}</text>
								</view>
							</view>
						</view>
						<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
							<view class="image-article">
							</view>
						</view>
					</view>
				</view>
			</block>
		 -->
		</view>

		<view v-if="searchFlowList.length === 0">
			<tn-empty mode="search" text="搜索结果空空如也"></tn-empty>
		</view>

	</view>
</template>

<script>
	import {
		getSearchProductPage
	} from "@/api/product.js"

	import {
		getLastSearchWord,
		deleteLastSearchWord
	} from "@/api/searchHistory.js"
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

	import {
		randomColor
	} from "@/utils/colorUtil.js";

	export default {
		name: 'TemplateSearch',
		mixins: [template_page_mixin],
		data() {
			return {
				list: [{
					name: '时间',
					type: 0
				}, {
					name: '浏览',
					type: 1
				}, {
					name: '下载',
					type: 2
				}, {
					name: '收藏',
					type: 3
				}],

				loadStatus: 'loadmore',
				searchFlowShow: true,
				searchFlowList: [],
				oldKeyword: '',
				searchParam: {
					keyword: '',
					page: 1,
					limit: 10,
					sortType: 0,
					//false倒序  true正序
					sortAsc: false,
				},
				inputValue: '',
				lastSearchWord: [],
				isUpdateLastWord: true,
				listSize: 0,
			}
		},
		onReachBottom() {
			if (this.loadStatus === 'nomore') {
				return
			}
			this.searchParam.page++
			this.getSearchProductData()
		},
		created() {
			this.getSearchProductData()
		},
		methods: {
			clickHistoryWord(word) {
				this.searchParam.keyword = word
			},
			// 排序顺序
			clickSortAsc(sortAsc) {
				this.searchParam.sortAsc = sortAsc
				if (this.searchFlowList.length === 0) {
					return
				}
				this.searchParam.page = 1
				this.searchFlowShow = false
				this.isUpdateLastWord = false
				this.getSearchProductData()
			},
			// 排序类型
			changeSort(index) {
				this.searchParam.sortType = index;
				if (this.searchFlowList.length === 0) {
					return
				}
				this.searchParam.page = 1
				this.searchFlowShow = false
				this.isUpdateLastWord = false
				this.getSearchProductData()
			},
			// 搜索
			searchProduct() {
				// 没有输入关键词，且已经加载了数据，点击不再搜索
				if (!this.searchParam.keyword && this.searchFlowList.length > 0) {
					return
				}
				if (this.searchParam.keyword === this.oldKeyword) {
					return
				}
				this.oldKeyword = this.searchParam.keyword + ''

				this.searchParam.page = 1
				this.searchFlowShow = false
				this.isUpdateLastWord = true
				this.getSearchProductData()
			},
			// 瀑布流加载完毕事件
			handleSearchFallFinish() {
				// 更新加载状态
				if (this.listSize === this.searchFlowList.length) {
					this.loadStatus = 'nomore'
				}
			},
			// 删除单个最近搜索词
			deleteOneLastSearchWordData() {
				deleteLastSearchWord().then(res => {
					this.getLastSearchWordData()
				})
			},
			// 删除列出来的最近搜索词
			deleteAllLastSearchWordData() {
				const allLastWordIds = this.lastSearchWord.map(item => item.id)
				deleteLastSearchWord(allLastWordIds).then(res => {
					this.getLastSearchWordData()
				})
			},
			// 获取最近搜索词
			getLastSearchWordData() {
				getLastSearchWord().then(res => {
					this.lastSearchWord = res.data
				})
			},
			// 查询搜索的商品数据
			getSearchProductData() {
				this.loadStatus = 'loading'
				getSearchProductPage(this.searchParam).then(res => {
					let productData = res.data.list

					// 截取标签，并设置颜色
					if (productData.length > 0) {
						for (let item of productData) {
							if (item.tags && item.tags.length > 0) {
								item.tags = item.tags.slice(0, 3)
								item.color = []
								for (let index in item.tags) {
									item.color.push(randomColor())
								}
							}
						}
					}

					// 更新数据
					if (this.searchParam.page === 1) {
						this.searchFlowList = productData
						this.listSize = res.data.total
					} else {
						this.searchFlowList = this.searchFlowList.concat(productData)
					}

					// 刷新列表
					if (!this.searchFlowShow) {
						this.searchFlowShow = true
					}

					// 更新搜索历史
					if (this.isUpdateLastWord && this.searchParam.page === 1 && this.searchParam.keyword != null) {
						this.getLastSearchWordData()
					}
				})
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	.tn-search-fixed {
		position: fixed;
		top: 50rpx;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 1;
	}


	/* 搜索标签 start*/
	.tn-tag-search {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 42rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title00.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 富文本图示意 start */
	.news-img {
		z-index: -1;
		padding-bottom: 40rpx;

		image {
			width: 100%;
			margin: 20rpx 0;
			// height: 3373rpx;
			// z-index: -1;
		}
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			padding: 7rpx 25rpx 5rpx 25rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 用户头像 start */
	.logo-image {
		width: 40rpx;
		height: 40rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 用户头像 end */

	/* 瀑布流*/
	.wallpaper__item {
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 0 10rpx;
		margin-bottom: 40rpx;
		// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

		.item {

			/* 图片 start */
			&__image {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				border: 1rpx solid #F8F7F8;
				border-radius: 10rpx;
				overflow: hidden;
			}

			/* 图片 end */

			/* 内容 start */
			&__data {
				padding: 14rpx 0rpx;
			}

			/* 标题 start */
			&__title-container {
				text-align: justify;
				line-height: 38rpx;
				vertical-align: middle;
			}

			&__title {
				font-size: 30rpx;
			}

			/* 标题 end */

			/* 标签 start */
			&__tags-container {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
			}

			&__tag {
				margin: 10rpx;
				color: #7C8191;
				background-color: #F3F2F7;
				padding: 4rpx 14rpx 6rpx;
				border-radius: 10rpx;
				font-size: 20rpx;

				&:first-child {
					margin-left: 0rpx !important;
				}
			}

			/* 标签 end */

			/* 内容 end */
		}
	}
</style>